<template>
	<el-dialog :visible.sync="options.showDialog" width="800px" class="evalDialog">
		<div class="detailHead clearfix">
			<div class="headText fl">职位查看</div>
		</div>
		<ul class="info clearfix">
			<li style="width: 100%">
				<div>公司名称 :</div>
				<div v-html="options.company"></div>
			</li>
			<li class="address" style="width: 100%">
				<div class="area fl">岗位工作地址:</div>
				<div class="right positionInfo-cityname">
					<div> {{options.userInfo.cityname}}-{{options.userInfo.areaname}}-{{options.userInfo.address}}</div>
				</div>
			</li>
			<li>
				<div>职能 :</div>
				<div v-html="options.userInfo.tradename"></div>
			</li>
			<li>
				<div>职位 :</div>
				<div v-html="options.userInfo.positionname"></div>
			</li>
			<li>
				<div>所属行业 :</div>
				<div v-html="options.userInfo.industrytypename"></div>
			</li>
			<li>
				<div>招聘人数 :</div>
				<div v-html="options.userInfo.recruitment"></div>
			</li>
			<li>
				<div>学历要求 :</div>
				<div v-html="options.userInfo.qualificationname"></div>
			</li>
			<li v-if="!(options.userInfo.minage == 16 && options.userInfo.maxage == 100)">
				<div>年龄范围 :</div>
				<div v-html="options.userInfo.minage+'岁 ~ '+options.userInfo.maxage +'岁'"></div>
			</li>
			<li v-show="options.userInfo.wagetype == 2">
				<div>工作时间段 :</div>
				<div v-html="options.userInfo.worktime"></div>
			</li>
			<li v-show="options.userInfo.wagetype == 2">
				<div>工作天数 :</div>
				<div v-html="options.userInfo.workday+'天'"></div>
			</li>

			<li>
				<div>工作经验 :</div>
				<div v-html="options.userInfo.worklifename"></div>
			</li>
			<li v-show="options.userInfo.wagetype != 2">
				<div>薪资待遇 :</div>
				<div v-html="options.userInfo.offer"></div>
			</li>
			<li v-show="options.userInfo.wagetype == 2">
				<div>时薪 :</div>
				<div v-html="options.userInfo.miniwage + '元/小时'"></div>
			</li>
			<li class="oneline mt-10">
				<div>福利待遇 : </div>
				<pre class="oneline-content"><span v-for="(item, index) in options.userInfo.welfareList" :key="index">{{item}}</span></pre>
			</li>
			<li class="oneline" v-if="options.userInfo.salaryStructure">
				<div>薪资架构 : </div>
				<pre v-html="options.userInfo.salaryStructure" class="oneline-content"></pre>
			</li>
			<li class="oneline" style="width: 100%">
				<div>岗位职责 :</div>
				<pre v-html="options.userInfo.jobcontent" class="oneline-content"></pre>
			</li>
			<li class="oneline">
				<div>任职要求 :</div>
				<pre v-html="options.userInfo.workduty" class="oneline-content"></pre>
			</li>
			<li class="oneline" v-if="options.userInfo.interviewRequest">
				<div>面试要求 : </div>
				<pre v-html="options.userInfo.interviewRequest" class="oneline-content"></pre>
			</li>
		</ul>
		<ul class="postInfo">
			<li>
				<div>发布时间 :</div>
				<div v-html="options.userInfo.insertdate"></div>
			</li>
			<li>
				<div>发布人 :</div>
				<div v-html="options.userInfo.nickname" style="color:#409EFF;cursor:pointer" @click="postManDetail"></div>
			</li>
		</ul>
		<el-dialog :visible.sync="dialogVisible" width="70%" :before-close="handleClose" append-to-body custom-class="people_dialog"
		 class="social_inner_dialog">
			<div class="dialog-title" slot="title">
				<dialog-title :slot-str="true" :title="userDetail.nickname"></dialog-title>
			</div>
			<div class="dialog-main">
				<div class="baseinfo">
					<div class="title">基本信息</div>
					<ul>
						<li class="clearfix">
							<div class="left">
								<span>会员名称 : {{userDetail.nickname}}</span>
							</div>
							<div class="right">
								<span>性别 :</span>
								<span v-if="userDetail.sex==='0'">未填</span>
								<span v-if="userDetail.sex==='1'">男</span>
								<span v-if="userDetail.sex==='2'">女</span>
							</div>
						</li>
						<li class="clearfix">
							<div class="left">
								<span>出生日期 : {{userDetail.birthdate}}</span>
							</div>
							<div class="right">
								<span>居住地 :</span>
								<span>{{userDetail.regionname}}</span>
							</div>
						</li>
						<li class="clearfix">
							<div class="left">
								<span>手机号码 : {{userDetail.telnum}}</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="platform">
					<div class="title">平台信息</div>
					<div class="content clearfix">
						<div class="left">
							<span>平台注册时间 :</span>
							{{userDetail.registertime.split(" ")[0]}}
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</el-dialog>
</template>

<script>
import dialogTitle from "@/main/common/title.vue";
export default {
	components: {
		dialogTitle
	},
	props: {
		options:{
			type: Object,
			require: true
		}
	},
	data() {
		return {
			userDetail: {
				registertime: ""
			},
			dialogVisible: false
		};
	},
	methods: {
		handleClose() {
			this.dialogVisible = false;
		},
		postManDetail() {
			let params = {
				userid: this.options.userInfo.userid
			};
			this.$storesAxios.post("/v1/platform/member/detail", params).then(resp => {
				if (resp.data.code === 1) {
					this.userDetail = resp.data.data;
					this.dialogVisible = true;
				}else{
					this.$message.warning(res.data.message);
				}
			});
		}
	}
}
</script>

<style lang='less' scoped>
.detailHead {
	padding: 20px 50px 20px 20px;
	border-bottom: 1px solid #d2d2d2;

	.headText {
		font-size: 18px;
		font-weight: 600;
	}
}

.info {
	li {
		float: left;
		width: 50%;
		padding: 12px 0;
		text-align: left;

		>div:nth-child(1) {
			display: inline-block;
			width: 120px;
			text-align: right;
			color: #909090;
			padding-right: 5px;
		}

		>div:nth-child(2) {
			display: inline-block;
			color: #404040;
		}
	}

	.oneline {
		width: 100%;
		box-sizing: border-box;
		line-height: 20px;
		padding: 14px 0 12px 120px;
		position: relative;

		>div {
			position: absolute;
			top: 14px;
			left: 0;
		}

		>.oneline-content {
			width: 100%;
			padding-right: 20px;
			padding-left: 4px;
		}
	}
}

.postInfo {
	border-top: 1px dashed #d2d2d2;
	// padding-top: 20px;
	text-align: left;

	li {
		line-height: 40px;

		div:nth-child(1) {
			display: inline-block;
			width: 120px;
			text-align: right;
			padding-right: 5px;
			color: #909090;
		}

		div:nth-child(2) {
			display: inline-block;
			color: #404040;
		}
	}
}

// .fl {
//   float: left;
// }

// .fr {
//   float: right;
// }
.place {
	vertical-align: top;
}

// .Working {
//   width: 350px;
//   line-height: 20px;
//   white-space: pre-wrap;
//   word-wrap: break-word;
//   vertical-align: top;
// }

.red {
	color: #f72e2e !important;
	font-size: 18px;
}

.green {
	color: #31c746 !important;
	font-size: 18px;
}

pre {
	// line-height: 20px;
	white-space: pre-wrap;
	/* Since CSS 2.1 */
	word-wrap: break-word;

	/* Internet Explorer 5.5+ */
	span {
		display: inline-block;
		width: 80px;
	}
}

.province,
.cityname {
	padding-right: 15px;
	color: #404040;
}

.right {
	color: #404040;
	float: left;
	text-align: left;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.pay {
	width: 100%;
	// background: #000;
}

// .positionInfo-cityname{
//   width: 300px;
//   background: #000;
// }
.dialog-main {
	padding-bottom: 50px;

	.baseinfo {
		border-bottom: 1px dashed #dcdcdc;

		.title {
			padding: 20px 0;
		}

		li {
			padding-bottom: 20px;
			padding-left: 30px;

			.left {
				float: left;
				width: 50%;
			}

			.right {
				float: left;

				span:first-child {
					display: inline-block;
					width: 100px;
					text-align: right;
				}

				span:last-child {
					display: inline-block;
					width: 80px;
					text-align: left;
				}
			}
		}
	}

	.platform {
		.title {
			padding: 30px 0 20px;
		}

		.content {
			padding-left: 30px;

			>div {
				float: left;
				width: 50%;
			}

			.right {
				span {
					display: inline-block;
					width: 100px;
					text-align: right;
				}
			}
		}
	}
}

.dialog-title {
	padding: 20px 0;
	padding-right: 30px;
	position: relative;

	.toInfo {
		color: #0064e4;
		position: absolute;
		top: 24px;
		right: 30px;
		cursor: pointer;
	}
}
</style>
<style>
	.social_inner_dialog {
		padding: 30px;
	}

	.social_inner_dialog .el-dialog__header {
		border-bottom: 1px solid #e6e6e6;
	}

	.treatment {
		padding-right: 4px;
	}

	pre {
		line-height: 20px;
		margin-left: 5px;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	pre span {
		display: inline-block;
		width: 80px;
	}

	.mt-10 {
		margin-top: 10px;
	}
</style>
